<html>
<head>
    <title>费用分析</title>

    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
        }

        .chart-outer{
            height: 300px;
            width: 90%;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="page-vue">
    <div class="page-title">费用分析</div>
    <div class="page-main">
    <el-col :span="4">
        <dev-tree ref="devTree" v-on:click-node="onTreeNode" :tabsign="'zd'" :energy="energyType"></dev-tree>
    </el-col>
    <el-col :span="20">
        <div class="main-head">
            <el-form :inline="true">
                <el-form-item label="">
                    <el-date-picker  :type="dateMod" v-model="day" :value-format="dateFormat" placeholder="日期" style="width: 150px;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-tooltip effect="dark" content="请点击左边树中区域或设备" v-model="tooltip" placement="right">
                    <el-button type="primary" @click="search">查询</el-button>
                    </el-tooltip>
                </el-form-item>
            </el-form>
        </div>
        <el-table   border stripe style="width: 100%" :data="tabData" v-if="energyType=='Electric'">
            </el-table-column>
            <el-table-column
                    v-for="(item,index) in dataFiled"
                    :prop="item.field" :label="item.name"  align="center">
            </el-table-column>
        </el-table>
        <div v-if="energyType!='Electric'">
        <div class="chart-outer" id="ChartDiv">
        </div>
        <p class="tab-title">统计</p>
        <el-table   border stripe style="width: 100%" :data="tabData" >
            <el-table-column prop="name" label="监测项" align="center">
            </el-table-column>
            <el-table-column
                    v-for="(item,index) in dataFiled"
                    :prop="item.field" :label="item.name"  align="center">
            </el-table-column>

        </el-table>

        </div>
    </el-col>
    </div>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-vue',
        data:{
            tabData:[

            ],
            day:'',
            tooltip:false,
            dataFiled:[],
            eleFiled:[
                {
                    name: '监测项', field: 'name',
                },
                { name:'时间',field:'time'},
                {   name:'总费用',field:'totalFee'},
                {  name:'总用量',field:'totalP'},
                {   name:'尖费用',field:'jFee'},
                {   name:'尖用量',field:'jUse'},

                {    name:'峰费用',field:'fFee'},
                {   name:'峰用量',field:'fUse'},

                {   name:'谷费用',field:'gFee'},
                {  name:'谷用量',field:'gUse'},

                {   name:'平费用',field:'pFee'},
                {   name:'平用量',field:'pUse'},

            ],
            monthFiled:[{name:"1月",field:'field02'},{name:"2月",field:'field03'},{name:"3月",field:'field04'},{name:"4月",field:'field05'},{name:"5月",field:'field06'},{name:"6月",field:'field07'},{name:"7月",field:'field08'},{name:"8月",field:'field09'},{name:"9月",field:'field10'},{name:"10月",field:'field11'},{name:"11月",field:'field12'},{name:"12月",field:'field13'}],
            dayFiled:[{name:"1日",field:'field04'},{name:"2日",field:'field05'},{name:"3日",field:'field06'},{name:"4日",field:'field07'},{name:"5日",field:'field08'},{name:"6日",field:'field09'},{name:"7日",field:'field10'},{name:"8日",field:'field11'},{name:"9日",field:'field12'},{name:"10日",field:'field13'},{name:"11日",field:'field14'},{name:"12日",field:'field15'},{name:"13日",field:'field16'},{name:"14日",field:'field17'},{name:"15日",field:'field18'},
                {name:"16日",field:'field19'},{name:"17日",field:'field20'},{name:"18日",field:'field21'},{name:"19日",field:'field22'},{name:"20日",field:'field23'},{name:"21日",field:'field24'},{name:"22日",field:'field25'},{name:"23日",field:'field26'},{name:"24日",field:'field27'},{name:"25日",field:'field28'},{name:"26日",field:'field29'},{name:"27日",field:'field30'},{name:"28日",field:'field31'},{name:"29日",field:'field32'},{name:"30日",field:'field33'},{name:"31日",field:'field34'}],
            dateMod:'month',
            energyType:'',
            dataId:'',
            dateFormat:'',
        },
        methods:{
            search:function(){
                 this.loadFeeParam();
            },
            onTreeNode:function(data){
                this.currentId = data.id;
                this.dataId  = data.dataId;
                this.loadFeeParam();
            },
            loadFeeParam:function(){
                var ids =this.currentId.split('_');
                var dArr = this.day.split('-');

                var param={
                    zoneIds: [this.dataId].join(','),
                    energyType:this.energyType,
                    year:dArr[0]||0,
                    month:dArr[1]||0,
                    day:dArr[2]||0,
                };
                switch (ids[0]) {
                    case 'Z':
                    param['zoneType'] = 0;
                    param['sumType'] = 3;
                    break;
                    case 'D':
                     param['zoneType'] = 3;
                     param['sumType'] = 1;
                        break;
                    default:
                        return;
                        break;
                }
                if(this.energyType=='Electric'){

                    //用量
                    HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                        var usedata = [];
                        for (var item of res.data){
                            var devicedata = {};
                            devicedata={
                                id:item.groupId,
                                name:item.groupName,
                                totalP:item.field04,
                                jUse:item.attributes.pv_j,
                                fUse:item.attributes.pv_f,
                                pUse:item.attributes.pv_p,
                                gUse:item.attributes.pv_g,
                                time:this.day
                            }
                            usedata.push(devicedata);
                        }
                        param['energyType'] = this.energyType+'2Money'


                        //费用
                        HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                            for (var item of res.data){
                                for (var ind in usedata){
                                    if (usedata[ind].id == item.groupId){
                                        usedata[ind]['totalFee'] = item.field04;
                                        usedata[ind]['jFee'] = item.attributes.pv_j;
                                        usedata[ind]['fFee'] = item.attributes.pv_f;
                                        usedata[ind]['pFee'] = item.attributes.pv_p;
                                        usedata[ind]['gFee'] = item.attributes.pv_g;
                                    }
                                }

                            }
                            this.tabData= usedata;
                        });
                    });

                }
                else{
                    param['energyType'] = this.energyType+'2Money'
                    HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                        var feedata = [];
                        var chartData = []
                        for (var item of res.data){
                            var devicedata = {};
                            devicedata={
                                id:item.groupId,
                                name:item.groupName,
                            }
                            var i =0;
                            var filedLength = 0;
                            if (this.dateMod=='month'){
                                i = 4;
                                filedLength = 35;
                            }else{
                                i =2;
                                filedLength = 14;
                            }
                            for(i;i<filedLength;i++){
                                var tmp = i;
                                tmp=tmp<10?String('0'+tmp):(tmp);
                                chartData.push(res.data['field'+tmp]);
                                devicedata['field'+tmp] = res.data['field'+tmp];
                            }
                            feedata.push(devicedata);
                        }
                        this.tabData= feedata;
                        this.getChart('ChartDiv',chartData);
                    });
                }
            },
            onChangePage:function(val){

            },
            getChart:function (id,data) {
                var xdata=[];
                for(var item  of this.dataFiled){
                    xdata.push(item.name);
                }
                let myChart = echarts.init(document.getElementById(id));
                this.ChartData={
                    color: ['#30BFCD', '#234567','#F98317'],
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: ['费用'],
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data:xdata,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series: [{
                        name: '费用',
                        type: 'bar',
                        stack: 'process',
                        data:data
                    }

                    ]
                };
                myChart.setOption(this.ChartData);
            },

        },
        created:function(){
            this.dateMod = HttpUtil.getQueryString('dateMod');
            this.energyType = HttpUtil.getQueryString('energyType');
            switch (this.energyType){
                case 'Electric':
                       this.dataFiled = this.eleFiled;
                       this.dateMod =='year'? this.dateMod='month':this.dateMod='date';
                         this.dateMod=='month'?this.dateFormat='yyyy-MM':this.dateFormat='yyyy-MM-dd';
                    this.dateMod =='month'?this.day= TimeUtil.convertToString(new Date()).substr(0,7):this.day= TimeUtil.convertToString(new Date()).substr(0,10)
                       break;
                 default:
                       this.dateMod =='year'?this.dataFiled = this.monthFiled:this.dataFiled =this.dayFiled;
                     this.dateMod =='year'?this.day= TimeUtil.convertToString(new Date()).substr(0,4):this.day= TimeUtil.convertToString(new Date()).substr(0,7)
                     this.dateMod=='year'?this.dateFormat='yyyy':this.dateFormat='yyyy-MM';
                       break;
            }



        },
        mounted:function(){
              this.tooltip = true;

        }
    });


</script>


</body>

</html>
